<template>
  <div class="content">
    <h2>message: {{message}}</h2>
    <button @click="changeMessage">修改message</button>
    <hr>
    <h2>账户:{{account.userName}}</h2>
    <h2>密码:{{account.password}}</h2>
    <button @click="changAccount">修改账户</button>
    <h2>reactive计数:{{counter.counter}}</h2>
    <h2>ref计数:{{counter2}}</h2> <!--默认情况下,在template中使用ref时,vue会自动解包-->
    <h2>info.counter2计数:{{info.counter2}}</h2> <!--使用时,不需要写.value解包-->
    <button @click="refChangeCounter">修改ref计数</button>
    <button @click="counter2++">修改ref计数,不使用counter2.value++也可以</button><!--修改时,需要.value解包-->
    <button @click="info.counter2++">修改ref计数,不使用info.counter2不可以</button>
    <button @click="info.counter2.value++">修改ref计数,使用info.counter2.value++也可以</button>

    <hr>
    <h2>ref,浅层解包,计数:{{info.counter2}}</h2> <!--vue3.1版本以前都是不行的, 要写成info.counter2.value-->
  </div>
</template>

<script>
  import {reactive, ref} from "vue"
  export default {
    setup() {
      //1. 定义普通数据,数据不是响应式的
      let message = "Hello World"

      function changeMessage() {
        message = "Hello Vue3"
        console.log(message)
      }

      //2. 定义响应式数据
      //2.1 方式一: reactive函数: 定义复杂数据类型,返回一个响应式对象,开发中很少使用
      // let account = reactive("why") // 简单类型会告警:[Vue warn] value cannot be made reactive: why
      let account = reactive({
        userName: "why",
        password: "123456"
      })
      function changAccount() {
        account.userName = "kobe"
        account.password = "456789"
      }
      // 2.2 简单类型使用reactive, 使用key-value的方式
      const counter = reactive({
        counter: 0
      })
      // 2.3 简单类型使用ref函数: 定义简单数据类型(也可以定义复杂类型数据),返回一个响应式对象
      let counter2 = ref(0)
      function refChangeCounter() {
        counter2.value++ // 返回的是ref对象,需要.value才能获取到值
      }

      // 3. ref是浅层解包
      const info = {
        // counter2: counter2 完整写法
        counter2 // 简写
      }
      
      // 返回给模板使用的数据
      return {
        message,
        changeMessage,
        account,
        changAccount,
        counter,
        counter2,
        refChangeCounter,
        info
      }
    }
  }
</script>

<style scoped>
</style>